<template>
  <!-- 华为专区 -->
  <div class="huawei">
    <!-- 轮播图 -->
    <swiper class="swiper" :options="swiperOption">
  　　<swiper-slide v-for="item in pageData.swiperList" :key="item.id">
        <img :src="item.url" />
      </swiper-slide>
  　　<div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!-- 模块导航 -->
    <div class="fixednav" :class="[isFixed ? 'fixedClass' : '']">
      <a class="item" v-for="item in 5" :key="item" :href="'#' + item"></a>
    </div>
    <!-- 预订有礼 -->
    <div class="popupconfig">
      <img src="https://res0.vmallres.com/shopdc/pic/6d450deb-819f-471d-b981-67cc3bb29cba.jpg" />
    </div>
    <!-- 抢券 -->
    <div class="coupons">
      <img src="https://res7.vmallres.com/shopdc/pic/d6194dd7-7c94-4a6b-8d28-0972d26952d0.jpg" />
      <div class="hearfs">
        <router-link to="1"></router-link>
        <router-link to="2"></router-link>
        <router-link to="3"></router-link>
      </div>
    </div>
    <!-- 抢券 -->
    <div class="coupons2">
      <img src="https://res4.vmallres.com/shopdc/pic/7537f199-99c0-405b-80e8-582c5be58d87.jpg" />
      <div class="hearfs">
        <router-link to="1"></router-link>
        <router-link to="2"></router-link>
        <router-link to="3"></router-link>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="goodsList" 
      v-for="item in pageData.goodsList" 
      :key="item.id" 
      :id="item.id" 
      :name="item.id">
      <img class="titleImg" :src="item.titleImg" />
      <div class="topImg" v-if="item.topImg !== ''">
        <img :src="item.topImg" />
      </div>
      <div v-if="item.isTab" class="tabs">
        <div class="item" 
          @click="tabItemClick(index)"
          :class="[activeTab === index ? 'active' : '']" 
          v-for="(nitem,index) in item.tabs" 
          :key="nitem.id">
          {{nitem}}
        </div>
      </div>
      <div class="goods">
        <div class="item" v-for="sitem in item.goods" :key="sitem.id">
          <img class="mainImg" :src="sitem.imgUrl" />
          <div class="title hide">{{sitem.title}}</div>
          <div class="desc hide">{{sitem.desc}}</div>
          <div class="price">¥ {{sitem.price}}<span v-if="sitem.idBase">起</span></div>
          <div v-if="sitem.sale" class="hide" :class="[item.isTab ? 'sale' : 'sale2']">{{sitem.sale}}</div>
          <img class="tipImg" v-if="sitem.tipImg !==''" :src="sitem.tipImg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css';
export default {
  name: 'huawei',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      pageData: {},
      isFixed: false,
      swiperOption: {
        direction : 'horizontal',
    　  pagination: {
  　　　　 el: '.swiper-pagination',
  　　　　 clickable: true, // 允许点击小圆点跳转
    　　},
    　　autoplay: {
    　　　　delay: 3000,
    　　　　disableOnInteraction: false 
    　　},
    　　loop: true,
      },
      activeTab: 0,
    }
  },
  methods: {
    // 获取首页数据
    async getHPageData(){
      this.pageData = await this.$http.get('../../../../static/mock/huawei.json');
    },
    tabItemClick(index){
      this.activeTab = index;
    },
    scrollToTop() {
  　　var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  　　if (scrollTop >= 425) {
        this.isFixed = true;
      }else{
        this.isFixed = false;
      }
    },
  },
  mounted() {
    this.getHPageData();
    window.addEventListener('scroll', this.scrollToTop)
  }
}
</script>
<style scoped lang="scss" >
.huawei{
  background-color: #f9f9f9;
  z-index: 1;
  .swiper{
    width: 750px;
    height: 850px;
    .swiper-wrapper{
      width: 100%;
      height: 100%;
      .swiper-slide{
        img{
          width: 750px; 
          height: 850px;
        }
      }
    }
    .swiper-pagination{
      text-align: right;
      height: 30px;
    }
  }
  .fixednav{
    background: url(https://res4.vmallres.com/shopdc/pic/648fa58c-d5cb-4fbc-8fe7-87c4f826dab3.jpg) no-repeat center center;
    background-size: 100% auto;
    height: 66px;
    width: 750px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    a{
      text-decoration: none;
      width: 20%;
      display: block;
    }
  }
  .fixedClass{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .popupconfig{
    img{
      height: 174px;
      width: 375px;
    }
  }
  .coupons{
    height: 200px;
    padding-top: 10px;
    width: 750px;
    position: relative;
    img{
      height: 190px;
      width: 750px;
    }
    .hearfs{
      position: absolute;
      left: 0;
      top: 10px;
      height: 190px;
      width: 750px;
      a{
        position: absolute;
        top: 0;
        bottom: 0;
        &:nth-of-type(1){
          left: 0;
          width: 300px;
        }
        &:nth-of-type(2){
          left: 310px;
          width: 60px;
        }
        &:nth-of-type(3){
          left: 380px;
          right: 0;
        }
      }
    }
  }
  .coupons2{
    height: 220px;
    width: 750px;
    margin-top: -10px;
    position: relative;
    img{
      height: 220px;
      width: 750px;
    }
    .hearfs{
      position: absolute;
      left: 0;
      top: 10px;
      height: 220px;
      width: 750px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      a{
        width: calc(100% / 3);
        display: block;
        height: 220px;
      }
    }
  }
  .goodsList{
    .titleImg{
      width: 750px;
      height: 180px;
    }
    .topImg{
      img{
        width: 750px;
        height: 588px;
      }
    }
    .tabs{ 
      height: 68px;
      border-radius: 34px;
      background-color: white;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      margin-bottom: 20px;
      .item{
        line-height: 68px;
        text-align: center;
        color: #333333;
        font-size: 24px;
        width: 25%;
      }
      .active{
        background-color: #7992d3;
        color: white;
        border-radius: 34px;
      }
    }
    .goods{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
      .item{
        text-align: center;
        position: relative;
        background-color: white;
        width: 364px;
        margin-bottom: 10px;
        padding-bottom: 40px;
        border-radius: 6px;
        .hide{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .mainImg{
          width: 364px;
          height: 360px;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
        .title{
          color: #222222;
          font-size: 28px;
          padding: 20px 10px 10px;
        }
        .desc{
          color: #666666;
          font-size: 26px;
          padding: 0 10px 10px 10px;
        }
        .price{
          display: inline-block;
          color: #ffffff;
          padding: 4px 10px;
          font-weight: bold;
          text-align: center;
          background-color: #7c9adf;
          width: 144px;
          border-radius: 30px;
          font-size: 30px;
        }
        .sale,.tipImg{
          position: absolute;
        }
        .sale{
          top: 324px;
          left: 0;
          background-color: #f86471;
          color: white;
          font-size: 24px;
          padding: 2px 16px;
          border-radius: 14px 14px 14px 0;
        }
        .sale2{
          position: absolute;
          top: 324px;
          left: 50%; 
          transform: translateX(-50%);
          background-color: #f86471;
          color: white;
          font-size: 24px;
          padding: 2px 16px;
        }
        .tipImg{
          top: 0;
          right: 0;
          width: 75px;
          height: 75px;
        }
      }
    }
  }
}
</style>